<template>
	<view class="home">
		<!-- banner轮播图 -->
		<view class="bg">
		</view>
		<view class="banner">
			<view class="bannner-img">
				<u-swiper :list="list" :height="160" :radius="15"></u-swiper>
			</view>
			<!-- <image class="bannner-img" src="https://wlsy.nanjingyunpeng.cn/weixin//image/home-banner.png"></image> -->
			<view class="banner-text" @click="gotoAnnouncement">
				<u-notice-bar :text="text1" bg-color="#FFFFFF" color="#666666" ></u-notice-bar>
				<button class="banner-announcement">
					<image class="bannner-announcement-text" src="https://wlsy.nanjingyunpeng.cn/weixin/image/home6.png"></image>
				</button>
				<!-- <view class="announcement-right">
					<text class="bannner-gonggao">具体最新发布公告内容详情，点击查看...</text>
				</view> -->
			</view>
		</view>
		<!-- 用户信息 -->
		<view class="PersonalInformation">
			<!-- 头像 -->
			<view class="avatar">
				<image class="avatar-img" :src="userData.avatar"></image>
			</view>
			<!-- 个人信息 -->
			<view class="message">
				<view class="nickname">
					{{userData.nickname}}
				</view>
				<view class="AgeAndDegree">
					<text class="age" v-if="userData.age">{{userData.age}}岁</text>
					<text class="degree">{{userData.school_record}}</text>
				</view>
				<view class="addresss">
					<image class="map" src="https://wlsy.nanjingyunpeng.cn/weixin/image/home7s.png"></image>
					{{userData.province}}
				</view>
			</view>
		</view>
		<!-- 选项 -->
		<view class="options">
			<view class="options-left options-innner">
				<image class="options-one" src="https://wlsy.nanjingyunpeng.cn/weixin/image/home1s.png" @click="gotochallenge"></image>
				<image class="options-list" src="https://wlsy.nanjingyunpeng.cn/weixin/image/home2.png" @click="gotoIformation"></image>
			</view>
			<view class="options-right options-innner">
				<image class="options-list" src="https://wlsy.nanjingyunpeng.cn/weixin/image/home3.png" @click="gotoranking"></image>
				<image class="options-list" src="https://wlsy.nanjingyunpeng.cn/weixin/image/home4.png" @click="gotoWQBook"></image>
				<image class="options-list" src="https://wlsy.nanjingyunpeng.cn/weixin/image/home5.png"></image>
			</view>

		</view>
	</view>

</template>

<script>
	import {
		getBanner,
		getnotices,
		getuserinfo
	} from "../../api/api.js"
	export default {
		data() {
			return {
				list1: [],
				list: [],
				text1: '具体最新发布公告内容详情，点击查看...',
				userData: {
					avatar: "",
					birthday: "",
					gender: "",
					nickname: "",
					openid: "",
					province: "",
					school_record: "",
					age: ""

				},
			}
		},
		onShow(){
			this.getuserinfo()
		},
		onLoad() {
			if(!uni.getStorageSync("token")){
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}

			this.getBanner()
			this.getnotices()
			this.getuserinfo()
		},
		methods: {
			//banner图
			async getBanner() {
				let res = await getBanner()
				if (res.code == 1000) {
					// console.log("11",res)
					res.data.forEach((item, index) => {
						this.list.push(item.img_url)

					})
				}
			},
			//系统公告
			async getnotices() {
				let res = await getnotices()
				// console.log(res)
				if (res.code == 1000) {
					// console.log("系统公告", res)
					this.text1 = res.data[0].content.substring(3)
					this.text1 = this.text1.substring(0,this.text1.length-4)
					// console.log("this.text1",this.text1)
					

				}
			},
			//获取用户信息
			async getuserinfo() {
				let res = await getuserinfo()
				if (res.code == 1000) {
					// console.log("用户信息", res)
					this.userData.avatar = res.data.avatar
					this.userData.birthday = res.data.birthday
					this.userData.gender = res.data.gender
					this.userData.age = res.data.age
					this.userData.nickname = res.data.nickname
					this.userData.school_record = res.data.school_record
					this.userData.province = res.data.province
				}
			},

			//每日挑战
			gotochallenge() {
				uni.navigateTo({
					url: '/pages/home/challenge2'
				});
			},
			//错题本
			gotoWQBook() {
				uni.navigateTo({
					url: `/pages/problem/WQBook?type=${"home"}`
				});
			},
			//相关资讯
			gotoIformation() {
				uni.switchTab({
					url: '/pages/information/information'
				});
			},
			//排行榜
			gotoranking() {
				uni.navigateTo({
					url: '/pages/home/ranking'
				});
			},
			//公告列表
			gotoAnnouncement() {
				uni.navigateTo({
					url: '/pages/detail/announcement'
				});
			}
		}
	}
</script>

<style>
	.bg {
		width: 100%;
		height: 120rpx;
		background: linear-gradient(1deg, #688EFA 0%, #466EE7 100%);
		border-radius: 0px 0px 50rpx 50rpx;
		opacity: 1;
	}

	.bannner-img {
		width: 690rpx;
		height: 320rpx;
		margin: -100rpx 30rpx;
		border-radius: 15rpx 15rpx 15rpx 15rpx;

	}

	.banner-text {
		width: 690rpx;
		height: 80rpx;
		background: #FFFFFF;
		box-shadow: 0px 2rpx 20rpx 0px rgba(51, 51, 51, 0.05);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		margin-left: 30rpx;
		margin-top: 120rpx;
		display: flex;
	}

	.banner-announcement {
		width: 140rpx;
		height: 80rpx;
		background: linear-gradient(1deg, #688EFA 0%, #466EE7 100%);
		border-radius: 10px 10px 10px 10px;
		opacity: 1;
		display: inline-block;
		position: absolute;
		left: 30rpx;
	}

	.u-notice-bar {
		background-color: #FFFFFF;
	}

	.bannner-announcement-text {
		width: 86rpx;
		height: 46rpx;
		margin-top: 18rpx;
	}

	.bannner-gonggao {
		font-size: 14px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		margin-top: 20rpx;
	}

	.PersonalInformation {
		width: 690rpx;
		height: 200rpx;
		background: linear-gradient(138deg, #688EFA 0%, #466EE7 100%);
		box-shadow: 0px 1px 4px 0px rgba(51, 51, 51, 0.05);
		border-radius: 10px 10px 10px 10px;
		opacity: 1;
		margin-top: 30rpx;
		margin-left: 30rpx;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
	}

	.avatar {
		width: 140rpx;
		height: 140rpx;
		border-radius: 140px;
	}

	.avatar-img {
		width: 100%;
		height: 100%;
		border-radius: 140px;
	}

	.message {
		margin-left: 30rpx;
		font-size: 14px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.age {
		margin-right: 10rpx;
	}

	.map {
		width: 32rpx;
		height: 32rpx;
	}

	.options {
		width: 690rpx;
		height: 568rpx;
		margin-top: 25rpx;
		margin-left: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.options-innner {
		width: 334rpx;
		height: 568rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.options-one {
		width: 334rpx;
		height: 372rpx;
	}

	.options-list {
		width: 334rpx;
		height: 176rpx;
	}

	.addresss {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
